<template>
    <div class="cooperation">
        <div class="topimg marginBt" ref="swiperContent">
        </div>
        <div class="page-wapper marginBt">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">婚庆公司入驻</h2>
            </div>
            <ul class="textBox">
                <li>解决海外婚礼、异地婚恋、亲友无法到场的痛点</li>
                <li>直播间品牌露出，专属广告栏</li>
                <li>提升新人婚礼体验，获客更容易</li>
                <li>直播数据反馈，收集获取更多客源</li>
                <li>通过婚礼直啵平台，获得品牌曝光</li>
                <li>大屏小屏互动游戏，为新人提供婚礼新玩法</li>
                <li>分会场大屏、电视投屏显示，消除场地限制</li>
                <li>另有商业直播平台，满足企业直播活动需求</li>
            </ul>
        </div>
        <div class="page-wapperMin marginBt">
            <div class="minPicBox">
                <ul class="imgLi">
                    <li v-for="(item, index) in aboutComArr" :key="index" style="position:relative;">
                        <div class="imgShadow">
                            <img class="miniImg" :src="item.imgSrc" alt="">
                        </div>
                        <p class="text">{{item.text}}</p>
                        <div class="dashedStyle" v-if="index !== aboutComArr.length-1"></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="page-wapper marginBt clear"  style="position:relative;">
            <div class="imgText imgText1">
                <h2 class="title">技术支持</h2>
                <p class="text">在线远程技术支持</p>
            </div>
            <div class="imgBox" style="margin:0 auto;text-align:center;">
                <img src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/637d925dccb6402d894ed703e45c8b01.png" alt="">
            </div>
            <div class="imgText imgText2">
                <div>
                    <h2 class="title">商机输送</h2>
                    <p class="text">广告栏品牌露出，获取客资 平台高净用户优先推荐</p>
                </div>
                <div class="text3">
                    <h2 class="title">市场支持</h2>
                    <p class="text">宣传手册，台卡，易拉宝等 其他市场物料</p>
                </div>
            </div>
        </div>
        <div class="JoinPhone">
            <h3 class="title">加盟热线</h3>
            <p class="phone">400-969-9192</p>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import { config } from 'common/js/config';
export default {
    metaInfo: {
        title: '直啵官网',
        meta: [
            {
                name: '合作伙伴',
                content: '婚庆公司,摄影公司'
            },
            {
                name: '婚礼直播',
                content: '款专注于婚礼直播的互联网平台。增添婚礼的趣味和互动性，个性化定制婚礼直播间、实时弹幕互动、红包祝福、在线云剪辑等，还有更多炫酷好玩的创意环节等您来挖掘并展现！'
            },
            {
                name: '上海通维数码科技',
                content: '不止于传输 - Beyond Transmission'
            }
        ]
    },
    data () {
        return {
            aboutComArr: config.aboutComArr, // 关于合作加盟
            ifMobile: false
        };
    },
    methods: {
        initial() {
            let wh = window.innerWidth;
            if (wh >= 768 && wh < 1400 && wh !== 828) {
            // PC端 宽度比例90%
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
                this.ifMobile = false;
            } else if (wh < 768 || wh === 828) {
            // 移动设备 828单独适配plus
                this.$refs.swiperContent.style.height = 1.7786 * wh + 'px';
                this.ifMobile = true;
            } else if (wh >= 1400 && wh < 1920) {
                // PC大屏 固定宽度
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
                this.ifMobile = false;
            } else {
                this.$refs.swiperContent.style.height = '860px';
                this.ifMobile = false;
            }
        }
    },
    mounted() {
        this.initial();
        window.addEventListener('resize', this.initial);
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
.cooperation
    .topimg
        background url("http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/128d7b54008841e9874638ffa17ad584.png") no-repeat left top
    .imgText1
        top 45%
        left 22%
    .imgText2
        top 20%
        right 8%
        .text3
            margin-top 150px
    .imgText
        position absolute
        .title
            font-size 30px
            font-weight 500
            line-height 42px
        .text
            font-size 14px
            line-height 20px
            font-weight 400
            margin-top 20px
@media screen and (max-width 1400px)
    .cooperation
        .imgText1
            top 45%
            left 18%
        .imgText2
            top 20%
            right 3%
            .text3
                margin-top 150px
        .imgText
            .title
                font-size 26px
            .text
                font-size 14px
@media screen and (max-width 767px)
    .cooperation
        .topimg
            background url("~common/image/img1.png") no-repeat left top
            background-size 100%
            .text
                display none
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3)
    .cooperation
        .topimg
            background url("~common/image/img1.png") no-repeat left top
            .text
                display none
</style>
